<template>
	<view class="columnY container">
		<view @click="hanldeChoice" class="choice color-fff font-26">{{$t('loginPage.choice')}}</view>
		<view class="login-center">
			<view class="form-top font-100 pad-top-bottom-60 centerY centerX">
				<image class="logo" src="/static/image/logo.png" mode="" />
			</view>
			<view class="radius20 form-box pad-30 font-34">
				<view class="text-center mar-bottom-40">{{$t('loginPage.title')}}</view>
				<!-- <Popover /> -->
				<!-- <view>手机号</view> -->
				<up-form class="mar-top-30" labelPosition="left" :model="formData" :rules="rules" ref="ruleFrom">
					<up-form-item prop="tel" borderBottom="true">
						<view class="centerXY mar-right-26" @click="regionalPhoneVisibel = true">
							<text class="mar-right-6">{{columnsRegional[0]?.value || '+886'}}</text>
							<up-icon name="arrow-down-fill" color="#000000" size="14" />
						</view>
						<up-input type="number" clearable placeholderClass="input-style"
							:placeholder="$t('loginPage.phoneTips')" v-model="formData.tel" border="none"></up-input>
					</up-form-item>

					<up-form-item prop="login_secret" class="mar-top-40" borderBottom="true">
						<up-input clearable :type="showPassword ? 'text' :'password'" placeholderClass="input-style"
							:placeholder="$t('loginPage.passwordTips')" v-model="formData.login_secret" border="none">
							<template #suffix>
								<up-icon color="#888888" size="20" class="icon" @click="changePassword"
									:name="showPassword ? 'eye-fill' : 'eye-off'" />
							</template>
						</up-input>
					</up-form-item>
				</up-form>
				<view class="text-right color-main font-26 mar-top-10">{{$t('loginPage.forgotPaw')}}</view>
			</view>
		</view>
		<view class="login-buttom pad-30">
			<view @click="hanldeRegister" class="mar-top-5 font-24 text-center">{{$t('loginPage.account')}} <text
					class="color-main">{{$t('loginPage.register')}}</text></view>
			<up-button class="font-32 mar-top-10 bg-main" shape="circle" color="#edad14"
				@click="submit">{{$t('loginPage.title')}}</up-button>
		</view>
	</view>
	<regional-phone :show="regionalPhoneVisibel" @close="regionalPhoneVisibel = false" @confirm="handConfirm" />
</template>

<script setup>
	import Popover from '@/components/popover/popover.vue'
	import RegionalPhone from '@/components/regional-phone/index.vue'
	import {
		reactive,
		ref
	} from 'vue'
	import {
		useI18n
	} from 'vue-i18n'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		login
	} from '@/api/login'
	import {
		userInfo
	} from '@/api/user'
	import {
		useStore
	} from '@/store/commonStore'

	const store = useStore()
	const {
		t
	} = useI18n()
	const formData = reactive({
		tel: '',
		login_secret: ''
	})
	const regionalPhoneVisibel = ref(false)
	const columnsRegional = ref([])
	const ruleFrom = ref(null)
	// 表单校验规则
	const rules = ref({
		tel: [{
				required: true,
				message: t('loginPage.phoneTips'),
				trigger: 'blur'
			},
			// {
			// 	pattern: /^[0-9]*$/,
			// 	message: t('loginPage.correct_phone_number'),
			// 	trigger: 'blur'
			// }
		],
		login_secret: [{
			required: true,
			message: t('loginPage.passwordTips'),
			trigger: 'blur'
		}]
	})

	// 选择全球手机号
	const handConfirm = (event) => {
		columnsRegional.value = event;
		regionalPhoneVisibel.value = false;
	}

	const validate = () => {
		return new Promise((resolve, reject) => {
			ruleFrom.value.validate().then(res => {
				resolve(true)
			}).catch(err => {
				uni.$u.toast(t('my.please_complete_information'))
				reject(err)
			})
		})
	}

	// 获取用户信息
	const getUserInfo = async () => {
		const res = await userInfo()
		store.userInfo = res.data.info
	}

	// 登录
	const submit = async () => {
		const result = await validate()
		// formData.tel = `${columnsRegional.value[0]?.value || '+886'}${formData.tel}`
		const res = await login({
			...formData,
			tel: `${columnsRegional.value[0]?.value || '+886'}${formData.tel}`
			// tel: `${formData.tel}`
		})
		if (res.code === 200) {
			getUserInfo()
			uni.$u.toast(t('loginPage.login_successful'))
			uni.setStorageSync('token', res.data.jwt.token)

			uni.switchTab({
				url: '/pages/index_actions/index'
			})
			// uni.redirectTo({
			// 	url: '/pages/index_actions/index'
			// })
		}
	}

	// 跳转注册
	const hanldeRegister = () => {
		uni.navigateTo({
			url: '/pages/register/register'
		})
	}

	// 查看密码
	let showPassword = ref(false);
	const changePassword = () => {
		showPassword.value = !showPassword.value;
	}

	const hanldeChoice = () => {
		uni.navigateTo({
			url: '/pages/locale/locale'
		})
	}
</script>

<style scoped>
	.container {
		height: 100vh;
		position: relative;
	}

	.choice {
		position: fixed;
		right: 30rpx;
		/* #ifdef H5 */
		top: 40rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		top: 44px;
		/* #endif */
	}

	.login-center {
		flex-grow: 1;
		background: white;
	}

	.logo {
		display: block;
		width: 198rpx;
		height: 110rpx;
	}

	.form-top {
		background: url('@/static/image/login-bg.png');
		background-size: cover;
		padding-bottom: 30rpx;
		color: white;
		height: 520rpx;
	}

	.form-box {
		margin-top: -30px;
		position: relative;
		background: white;
	}

	.login-buttom {
		background: white;
	}
</style>